window.addEventListener("load", function () {
	// 功能一
	//回到顶部
	// 思路
	// 1.获取相关节点
	const topNode = document.querySelector("#top");
	// console.log(topNode);
	//2.给top绑定点击事件
	topNode.addEventListener("click", function () {
		//3.点击过后回到顶部
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});
	//3-1.刚开始进行隐藏,y轴滚动条大于200px的时候就出现
	window.addEventListener("scroll", function () {
		if (this.scrollY >= 200) {
			topNode.style.transition = "opacity 1s";
			topNode.style.opacity = 1;
		} else {
			topNode.style.opacity = 0;
		}
	});

	// 模拟服务器上的传递过来的数据
	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];

	// 功能一：动态渲染API分类区
	// 1.获取后台数据进行遍历
	let html = "";
	apiTypeData.forEach(function (v, i) {
		// 2.遍历时拼接HTML结构
		// 思考：如何将激活样式和加粗样式加上
		if (i === 0) {
			// 索引为0增加激活样式active
			html += `<li class="active" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			// 数据isnew为true，增加文字加粗样式
			html += `<li class="fw-bold" title=${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title=${v.keyword}>${v.name}</li>`;
		}
	});
	// 3.将拼接的HTML结构放入对应的位置
	$("#apiCateList").innerHTML = html;

	// 功能二：API分类区点击后增加激活样式
	// 1.获取相关节点
	// $("#apiCateList li")
	// 2.给li绑定点击事件
	$("#apiCateList li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3.先排他，清除其他激活的li
			$("#apiCateList li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4.再给当前被点击的对象增加激活样式
			this.classList.add("active");
			// 功能三:点击API分类区的标签,联动给下面的搜索框
			// 1.将this的textContent赋值给strong
			$("#searchInput strong").textContent = this.textContent;
			// 2将this的title赋值给input的value
			$("#searchInput input").value = this.title;
		});
	});

	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	// 功能三:功能三给卡片区增加渲染
	// 1.获取相关节点,进行遍历
	// let cardHtml='';
	// listDataArr.forEach(function(v){
	// 	//2.遍历时拼接为html结构
	// 	cardHtml += `<li class="rel">
	// 	${v.isSpecial ? '<span class="abs fz-14">企业专用</span>' : ''}
	// 	<img src="../imgs/${v.img}" alt="加载失败">
	// 	<p>${v.name}</p>
	// 	<p class=${v.isSpecial? 'fc-red': 'fc-green'}>${v.price}</p>
	// 	<a href="#" class="fc-white fz-14 abs">申请数据</a>
	// </li>`
	// })
	// //3.将html的结构放入指定的位置
	// $('#apiCardlist').innerHTML=cardHtml

	// 功能四:点击分页器时,添加激活样式
	//获取相关节点
	//绑定点击事件
	$("#pagination ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3.点击后先移除全部按钮的激活样式（排他思想）
			$("#pagination ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4.再给自己增加激活样式
			this.classList.add("active");
			// 功能6：点击分页器实现卡片区的分页
			console.log(Number(v.textContent));
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	console.log("第一页", listDataArr.slice(0, 5));
	console.log("第二页", listDataArr.slice(5, 10));
	console.log("第三页3", listDataArr.slice(10, 15));
	console.log("第四页4", listDataArr.slice(15, 20));
	//点击分页器实现卡片区的分页,封装一个渲染函数
	//复用封函数,渲染函数
	//1.实现基本功能
	//2.确定函数名--render
	//3.确定函数参数--当前页码pagination.每条页数pageSize.arr
	//当前页码.每条页码.原数据
	//公式:(当前页码-1)*每条页数
	//(1-1)*5
	//(2-1)*5
	//4.确定是否需要返回值--不
	//5.将基本功能带入函数,进行替换
	function render(pagination, pageSize, arr) {
		// 思路：先对数据进行处理然后执行渲染
		// 技巧：数据处理和渲染要分开考虑！！！
		// 对数组进行处理
		// 求开始索引 (当前页码 - 1) * 每页条数
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		// 1.获取后台数据，进行遍历
		let cardsHtml = "";
		result.forEach(function (v) {
			// 2.遍历时拼接为HTML结构
			cardsHtml += `
				<li class="rel">
					<img src='../imgs/${v.img}' alt="图片已损坏" />
					<p>${v.name}</p>
					<p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
					${v.isSpecial ? '<span class="abs">企业认证</span>' : ""}
					<a class="abs" href="#">申请数据</a>
				</li>
			`;
		});
		// 3.将HTML结构放入指定位置
		$("#apiCardlist").innerHTML = cardsHtml;
	}
	// 6.调用测试
	render(1, 5, listDataArr);
	// 7.优化代码

	// 添加蒙尘
	// 思路
	//1.获取相关节点$('#mask'),$('#apiCardlist')
	//2.用事件委派给公共的祖先上面apiCardlist绑定点击事件
	$("#apiCardlist").addEventListener("click", function (e) {
		//3.根据事件源的localName属性来进行区分,a标签
		if (e.target.localName === "a") {
			//4.弹出蒙尘
			$("#mask").style.display = "block";
			$("html").style.overflow = "hidden"; //弹出蒙尘没有滚动条
		}
	});
	//5.关闭蒙尘
	$("#mask").addEventListener("click", function () {
		$("#mask").style.display = "none";
		$("html").style.overflow = "auto"; //取消蒙尘出现滚动条
	});
	//6.阻止登录框的事件传播
	$("#loginModal").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	//功能二:点击模态框中的Tab按钮,对应的按钮要激活,显示对应的form表单
	//1.获取相关的节点$('#loginModalTab a')
	//2.给Tab绑定点击事件
	$("#loginModal form")[0].style.display = "block"; //默认显示第0个form表单
	$("#loginModalTab a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			//3.点击过后要先排他,排他要遍历.排除a标签的激活样式
			$("#loginModalTab a").forEach(function (item, index) {
				item.classList.remove("active");
				//思考:排他时,可以在遍历a标签时就把form表单也清空吗?
			});
			//4.给a标签添加相对应的激活样式
			this.classList.add("active");
			//5.排他,移出所有form的表单
			$("#loginModal form").forEach(function (each) {
				each.style.display = "none";
			});
			//6.添加相对应的form表单
			$("#loginModal form")[i].style.display = "block";
		});
	});
});
